import { Card } from 'antd'
import './index.scss'

const PieChart = ({ title }) => {
  const data = [
    { label: '小说类', value: 45, color: '#1890ff' },
    { label: '文学类', value: 35, color: '#52c41a' },
    { label: '其他类', value: 20, color: '#faad14' }
  ]

  return (
    <Card title={title} className="pie-chart-card" extra={<a href="#more">查看更多</a>}>
      <div className="pie-container">
        <svg viewBox="0 0 200 200">
          <circle
            cx="100"
            cy="100"
            r="70"
            fill="none"
            stroke="#1890ff"
            strokeWidth="40"
            strokeDasharray="198 440"
            transform="rotate(-90 100 100)"
          />
          <circle
            cx="100"
            cy="100"
            r="70"
            fill="none"
            stroke="#52c41a"
            strokeWidth="40"
            strokeDasharray="154 440"
            strokeDashoffset="-198"
            transform="rotate(-90 100 100)"
          />
          <circle
            cx="100"
            cy="100"
            r="70"
            fill="none"
            stroke="#faad14"
            strokeWidth="40"
            strokeDasharray="88 440"
            strokeDashoffset="-352"
            transform="rotate(-90 100 100)"
          />
          <text x="100" y="95" textAnchor="middle" fontSize="24" fontWeight="bold" fill="#333">
            图书分类
          </text>
          <text x="100" y="115" textAnchor="middle" fontSize="14" fill="#999">
            占比统计
          </text>
        </svg>
        
        <div className="pie-legend">
          {data.map((item, index) => (
            <div key={index} className="legend-item">
              <span className="legend-color" style={{ background: item.color }}></span>
              <span className="legend-label">{item.label}</span>
              <span className="legend-value">{item.value}%</span>
            </div>
          ))}
        </div>
      </div>
    </Card>
  )
}

export default PieChart
